公開日：2022年11月30日
HTMLメールにリンクを埋め込む方法をご存じでしょうか。挿入したリンクをクリックしてもらえれば、メーラーを立ち上げたり、誘導したいページに遷移させたりすることができます。
今回の記事では、どなたでもリンクを埋め込むことができるように、・リンクとは・リンクを埋め込む4つの方法・クリック率を上げる施策・メーラーを開くリンクのコーディング方法について解説します。
HTMLメールの中にリンクを埋め込むために必要なことを、丁寧に分かりやすく説明しますので、ぜひ参考にしてみてください。
目次リンクとは？リンクとは正式名称「ハイパーリンク」の略称で、文章や画像などをクリックするだけで、別のページやサイトに飛ぶ仕組みのことを指します。
似た言葉に「URL」がありますが、URLはページやサイトが存在する場所の住所を指しているもので、リンクはその場所に誘導する入口であると覚えておくと良いでしょう。
まとめるとリンクとURLは以下のような違いがあります。
説明例リンク他のページへ誘導するもの配配メールURLページの住所https://www.hai2mail.jp/ HTMLメール文中にリンクを埋め込む4つの方法次はメール内にリンクを埋め込む4つの方法について紹介します。
1. URLをそのまま設置するテキストメールやHTMLメールに限らず基本的にどんな形式でも、正常なURLの表記であれば、URLを貼り付けるだけでリンク化することが可能です。しかし、リンクを貼り付けるだけでは、他のテキストに埋もれてしまいますし、読者がクリックしたくなるような訴求も難しいので、クリック効果は薄くなってしまいます。最も簡単に実装できる方法ですが、クリック率は低くなる可能性が高いです。
2. 文字リンクで設置する（HTMLメールのみ）文字リンクはテキストメールでは設置できず、HTMLメールでのみ設置できます。任意の文字を指定できるので、長いURLの場合でも短縮して表示できるだけでなく、読者がクリックしたくなるような文言にしてクリック率を高めることも可能です。
HTMLではコードを記述する必要があり、
href以下の""（ダブルクオーテーション）で囲まれた部分に、遷移先のURLを記載する ＜a＞＜/a＞の間に設定したい文言（アンカーテキスト）を記載するといった対応が必要になります。
弊社で調査したところ、URLをそのままリンクにする方法よりも、クリック率が約3倍ほど高くなることが分かっています。
簡単操作／HTMLメールの作成方法 3. ボタンで設置する（HTMLメールのみ）Webサイトのように、リンクをボタン形式で設置することもできます。その場合、「aタグ」「buttonタグ」「inputタグ」を使う3つの方法がありますが、今回は「aタグ」を使って設置する方法をご紹介します。
ボタンを設置する場合、CSSを使って色やサイズを装飾していく必要があります。
CSS（Cascading Style Sheets）とは、文字・画像のデザインや配置の指定を行うことができる言語です。文字リンクで紹介したaタグとhref属性に加えて、styleタグを使ってボタンをコーディングすることができます。これまでご紹介してきたリンクよりも、設置する難易度は上がりますが、下記を参考に設置してみましょう。
.example{display: block;width: 300px;padding: 15px 0;margin: auto;background: #569f3c;color: #FFF;text-decoration: none;text-align: center;}.example:hover{background: #225f0d; もっと見るHTMLやCSSを使うのが難しいという方は、メール配信サービスの活用がおすすめです。メール配信サービスには、タグを使わずともHTMLメールが簡単に作成できる「HTMLエディタ」という機能を提供しているものもあります。サービスにもよりますが、こうした機能を活用することで、きれいなボタンリンクを直感的に作ることもできます。
関連記事はこちら配配メールのHTMLエディタを紹介
4. 画像で設置する（HTMLメールのみ）画像にリンクを設定するためには、アンカーテキストの部分に画像を表示するタグを記載すれば、画像リンクを作成することができます。文字リンクの設定方法と大きく変わりはありませんが、アンカーテキストを記載するか画像の表示するタグを記載するかという点で異なります。
img src=”hai2mail_sample.jpg画像リンクの設置も大して時間は必要としませんが、1つずつ作成するとなると多少時間がかかってしまうことやコードのエラーなどが発生しやすくなります。メール配信サービスを利用することで、画像リンクも直感的に作成することが可能です。
メール配信サービスを活用したボタンリンク・画像リンクの作り方リンクの種類とタグを使った作成方法をご紹介してきましたが、普段タグを利用しない方にとってはボタンリンクや画像リンクの作成はハードルが高いと思います。
作成に不安を感じる方は、メール配信サービスのご利用をおすすめします。どれくらい簡単に作成できるかを配配メールのHTMLエディタを例にご紹介いたします。
ボタンリンクの作成方法HTMLエディタを使えば、ドラッグ＆ドロップといった直観的な操作でボタンの作成ができます。
配配メールの場合は、ボタンのコンテンツブロックを選択し、右側のアクション項目に遷移先のURLと入れるだけでボタンリンクが作成できます。
ボタンの色やサイズ変更や、影をつけて立体的なデザインにすることもできます。
右側にボタン設定項目があるので、そこで任意の色やサイズに変更できます。
画像リンクの作成方法画像リンクの場合は、画像のコンテンツブロックを選択し、「参照」をクリックすると、配配メール上にこれまでアップロードされた画像が表示されます。あらかじめアップロードしておいた画像を選択、もしくはアップロードボタンから画像を選び、「挿入」をクリックすればメール